<template>
  <div class="card">
    <div class="p-2 text-center bg-light font-weight-bold">近三年企业经营状况增长率</div>
    <div style="min-height: 315px" class="p-2">
      <div>
        <span>年份选择：</span>
        <c-select style="width: 120px" :options="years" v-model="selectYear"></c-select>
      </div>
      <el-echarts theme="macarons" :option="options" :height="260"></el-echarts>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    const currentYear = new Date().getFullYear()
    return {
      selectYear: currentYear,
      years: [
        { label: `${currentYear}年`, value: currentYear },
        { label: `${currentYear - 1}年`, value: currentYear - 1 },
        { label: `${currentYear - 2}年`, value: currentYear - 2 },
      ],
      options: {
        title: {
          text: '近三年企业经营状况增长率',
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 40,
          bottom: 30,
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: ['企业纳税', '消费缴纳', '电费缴纳', '燃气缴纳', '营业收入', '营业利润'],
        },
        yAxis: {
          type: 'value',
          name: '增长率(%)',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '企业',
            type: 'bar',
            label: {
              show: true,
              formatter: '{c}%',
            },
            data: [-20, 60, 20, -60, -60, 20],
          },
          {
            name: '行业',
            type: 'bar',
            label: {
              show: true,
              formatter: '{c}%',
            },
            data: [75, 30, 15, -10, 56, -80],
          },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped></style>
